<script setup lang='ts'>
import { ref } from 'vue';

//  整页翻动效果 demo。 （暂未使用） 后续可用作 “关于我们” 介绍页面使用
const list = ref([]);

list.value = [
  {
    title: "高效问答",
    to: ""
  }
]

</script>
<template>
  <div class="turning">
    <div class="parallax scrollbar-none">

      <div class="img flex-c img1">
        <div class="content">
          <div class="top flex">
            <div class="title"> 高效问答 </div>
            <div class="more">立即体验</div>
          </div>
          <div class="remark">
            直接与不同模型（chatGPT/4.0/claude/chatglm等）聊天和问答。左下角选择模型种类，默认为ChatGPT
          </div>
        </div>
      </div>

      <div class="img flex-c img2">
        <div class="content">
          <div class="top flex">
            <div class="title"> 在线检索 </div>
            <div class="more">立即体验</div>
          </div>
          <div class="remark">
            开启联网功能，可搜索即时信息。bing全网搜索可以帮助您在整个网络范围内找到答案，让机器人不再胡说八道。arxiv学术网站搜索（仅支持英文输入）则可帮您在学术领域找到相关文献，让您的论证更有理有据
          </div>
        </div>
      </div>
      <div class="img flex-c img3">
        <div class="content">
          <div class="top flex">
            <div class="title"> 随心作画 </div>
            <div class="more">立即体验</div>
          </div>
          <div class="remark">
            您可以输入任何想要的东西，机器人会尽力为您画出想要的场景。尽情想象，与机器人共同创作美好的艺术作品
          </div>
        </div>
      </div>
      <div class="img flex-c img4">
        <div class="content">
          <div class="top flex">
            <div class="title"> 文档分析 </div>
            <div class="more">立即体验</div>
          </div>
          <div class="remark">
            上传您需要分析的文档，机器人就会自动分析文档内容，根据文档内容解答您的提问
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.turning {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.parallax {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;

}

.img {
  height: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: fixed;
  scroll-snap-align: start;


  .content {
    width: 1000px;
    height: 500px;
    max-width: 87%;
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    padding: 30px;
    background: #ffffff71;
    /* 替换为实际的图像路径 */
    border-radius: 10px;
    box-shadow: inset 0px 0px 10px 10px #fff;

    .top {
      justify-content: space-between;

      .more {
        padding: 10px 15px;
        background: #fdf6bce0;
        /* 替换为实际的图像路径 */
        border-radius: 3px;
        cursor: pointer;
        font-size: 12px;
      }
    }

    .title {
      font-size: 40px;
      letter-spacing: 5px;
      font-weight: 900;
    }

    .remark {
      margin-top: 30px;
      letter-spacing: 3px;
      line-height: 30px;
    }

  }
}


.img1 {
  background-image: url("https://c.wallhere.com/photos/54/65/2560x1600_px_digital_art_geometry_Justin_Maller-998591.jpg!d");
}

.img2 {
  background-image: url("https://c.wallhere.com/photos/26/71/3072x2304_px_blue_Blurred_glitch_Art_Photo_Manipulation_sky-843746.jpg!d");
}

.img3 {
  background-image: url("https://c.wallhere.com/photos/37/f6/1920x1080_px_HTC_One_M8_HTC_Sense_6-1210933.jpg!d");
}

.img4 {
  background-image: url("https://c.wallhere.com/photos/ab/83/apple_mac_blots_surface_paint-730191.jpg!d");
}
</style>